<template>
  <div class="h100 commonTableSty" ref="strategyTaskTableList">
    <a-table
      :columns="columns"
      :components="tableComponents"
      :data-source="items"
      :pagination="false"
      :scroll="{ y: 500,x:900 }"
      row-key="level"
    >
      <template slot="stage" slot-scope="text,record">
        {{ text }}
        <a-tag
          class="levelTag"
          v-if="record.currentLevel"
        >
          {{ $t('dqjd') }}
        </a-tag>
      </template>
      <template slot="tsclzb" slot-scope="text">
        {{ text }}%
      </template>
      <template slot="jztj" slot-scope="text,record">
        <span class="jztj">{{ $t('xzcgd') }}</span>
        <span class="jztj">{{ record.downloadNumPercent }}%</span>
        <span class="jztj">{{ conditionTypeObj[record.conditionType] }}</span>
        <span class="jztj">{{ $t('azcgd') }}</span>
        <span>{{ record.installNumPercent }}%</span>
      </template>
    </a-table>
  </div>
</template>
<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { mapState } from 'vuex'
import tableDraggable from '@/utils/tableDraggable'
export default {
  components: {
    tableEllipsis
  },
  props: {
    items: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    ...mapState({}),
    conditionTypeObj () {
      return this.$store.getters.getTaskDictCodeObj('conditionType')
    },
    commonColumns () {
      return this.columns.filter((item) => !item.special)
    }
  },
  data () {
    return {
      columns: [
        {
          title: this.$t('stage'),
          width: 120,
          dataIndex: 'level',
          scopedSlots: { customRender: 'stage' }
        },
        {
          title: this.$t('tsclzb'),
          width: 120,
          dataIndex: 'pushNumPercent',
          scopedSlots: { customRender: 'tsclzb' }
        },
        {
          title: this.$t('jztj'),
          width: 300,
          scopedSlots: { customRender: 'jztj' }
        }
      ],
      tableComponents: {}
    }
  },
  created () {
    this.tableComponents = tableDraggable(this.columns)
  }
}
</script>
<style lang="less" scoped>
.jztj{
    margin-right:20px
}
.levelTag {
  color: #2bb080;
  background: #fff;
  border-color: #2bb080;
  margin-left:10px
}
</style>
